<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Gpx Explorer"
description="Displays gpx track on the map!"
author="cheah wei"
author_email="cheahwei.leow@gmail.com"
height="300">
<Require feature="sharedmap"/>
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html">
          <![CDATA[
<img alt='GPX Explorer' src='http://fengshuiexplorer.host56.com/images/compass.png'>
<h2>Gpx Explorer V1.62</h2>
<form name="actionform">
<input type="button"
value="Click here to load the selected gpx file."
onclick=
"monthly.value=getPayment(parseFloat(amount.value),
parseFloat(rate.value),parseInt(n.value,10));" />

<br />
GPX viewing option:<br />
Waypoints: <input type="checkbox" name="wptBox"
value="waypoint" />
Route: <input type="checkbox" name="rtBox"
value="route" />
Track: <input type="checkbox" name="trkBox"
value="track" />

<br />
<input type="button"
value="Redraw Map"
onclick=
"map.clearOverlays();
drawMap();" />
</form>

<head>



<!-- graph code begins here-->
<script type="text/javascript" src="http://fengshuiexplorer.host56.com/chart/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://fengshuiexplorer.host56.com/chart/line.js">
<!-- Line Graph script-By Balamurugan S http://www.sbmkpm.com/ //-->
<!-- Script featured/ available at Dynamic Drive code: http://www.dynamicdrive.com //-->
</script>
  <p><a href="#" onclick="loadData();">Load Data</a><p>
  <p>status: <span id="status">Nothing loaded yet. Click Load Data above.</span></p>
  <p id="content"></p>
  <div id="lineCanvas" style="overflow: scroll;white-space: nowrap; position:relative;height:200px;width:280px;"></div>
  
<script type="text/javascript">
// NOTE: edit this URL to point to your own CSV file
var remotedata_url = "http://www.mobteq.com/cwleow/markers.csv";
function loadData() 
{
	_gel("status").innerHTML = "loading...";
	_IG_FetchContent(remotedata_url, handleFetchContent);
}

function handleFetchContent(responseText) 
{
        
	// check to see if there was an error in the fetch
	if (responseText == null)
  {
		// an error occurred
		_gel("status").innerHTML = "Failed to load data";
		return;
	}

	_gel("status").innerHTML = "Done loading data";
	
	var displayHTML = "";
	
	// use the split to parse the incoming marker data
	var markerData = responseText.split(",");

	// loop over the individual marker data fields
	for (var i = 0; i < markerData.length; i++) 
  {
	
		// extract each field of data
		displayHTML += markerData[i] + " ";

		// since we have four fields of data per marker
		// so we need to add a <br> tag to break up the display
		// after we already have four fields of marker data
		if ((i+1)%4 == 0)
    {
			displayHTML += "<br/>";
		}
	}

	_gel("content").innerHTML = displayHTML;
}  


function drawLineGraph(graphData)
{
  var g = new line_graph();
  for(var count=0;count<graphData.length;count++)
  {
     g.add(count,graphData[count]);
  }
  g.render("lineCanvas", "Line Graph");
  
  // resize the mapplet window height
  _IG_AdjustIFrameHeight();
}      
</script>

</head>


<script>

var map = new GMap2();
// Modify this to set the initial zoom level
var zoomlevel = 11;

// Modify this to set the icon types used
var red_pin = new GIcon();
red_pin.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
red_pin.iconSize = new GSize(12, 20);
red_pin.shadowSize = new GSize(22, 20);
red_pin.iconAnchor = new GPoint(6, 20);
red_pin.infoWindowAnchor = new GPoint(5, 1);

var green_pin = new GIcon();
green_pin.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
green_pin.iconSize = new GSize(12, 20);
green_pin.shadowSize = new GSize(22, 20);
green_pin.iconAnchor = new GPoint(6, 20);
green_pin.infoWindowAnchor = new GPoint(5, 1);

//function changeChartSrc(elevationData)
//{
//document.getElementById("altChart").src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:10,20,34,55,45,20,9,34,56,78&amp;cht=lc&amp;chl=altitude"
//}

// Modify this to map attributes to colors or icon types
//
function chooseIcon(name, type) 
{
  if (type == "AIRPORT" ) { return(red_pin) }
  if (type == "Dot" ) { return(red_pin) }
  return(green_pin);
}

// Creates a marker at the given point with the given number label
function createMarker(dpoint, name) 
{
  var marker = new GMarker(dpoint);
  GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(name);});
  map.addOverlay(marker);
  return marker;
}

// *****************************************************
// *****************************************************
// Internal function to create a marker with pop-up text
//
function createMarker(ipoint, thtml, icon) 
{
  var marker = new GMarker(ipoint, icon);
  GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(thtml);});
  map.addOverlay(marker);
  return marker;
}

function chooseLineStyle(name, comment) 
{
  switch(comment)
  {
    case "BB":
        return(new Array("#00f0f0",5,.5));
        break;
    case "White":
        return(new Array("#ff00ff",5,.5));
        break;
    default:
        return(new Array("#ff2000",6,.7)); // Color,Width,Opacity
        break;
  }
}

function drawMap()
{

  _IG_FetchXmlContent(url, function (response)
    {
      //
      // Parse document <bounds>. Open map. Guess at zoom level.
      //
      minlat = 0;
      minlon = 0;
      maxlat = 0;
      maxlon = 0;
      bounds = response.getElementsByTagName("bounds");
      
      if( bounds && bounds.length )
      {
        minlat = parseFloat(bounds[0].getAttribute("minlat"));
        minlon = parseFloat(bounds[0].getAttribute("minlon"));
        maxlat = parseFloat(bounds[0].getAttribute("maxlat"));
        maxlon = parseFloat(bounds[0].getAttribute("maxlon"));
      }
      
      zoomlat = minlat+(maxlat-minlat)/2;
      zoomlon = minlon+(maxlon-minlon)/2;
      map.setCenter(new GLatLng(zoomlat,zoomlon),zoomlevel);
      
      // Parse waypoints in <wpt></wpt> tags
      //
      var wpt;
      wpt = response.getElementsByTagName("wpt")
      if( wpt && document.actionform.wptBox.checked == true)
      {
        for (var i = 0; i < wpt.length; i++)
        {
          point = new GLatLng(parseFloat(wpt[i].getAttribute("lat")),
          parseFloat(wpt[i].getAttribute("lon")));
          // Extract <name></name> tag
          tname = "";
          tlabel = "";
          element = wpt[i].getElementsByTagName("name");
          if( element.length ) 
          {
            tname = element[0].firstChild.nodeValue;
            tlabel += element[0].firstChild.nodeValue;
          }
        
          // Tack on <cmt></cmt> tag
          element = wpt[i].getElementsByTagName("cmt");
          if( element.length ) 
          {
            if(tlabel) { tlabel += ": "; }
            tlabel += element[0].firstChild.nodeValue;
          }
          
          // Tack on <desc></desc> tag
          element = wpt[i].getElementsByTagName("desc");
          if( element.length ) 
          {
            if(tlabel) { tlabel += " - "; }
            tlabel += element[0].firstChild.nodeValue;
          }
          
          // Extract <url></url> tag, build html for popup
          element = wpt[i].getElementsByTagName("url");
          if( element.length ) 
          {
            turl = element[0].firstChild.nodeValue;
            var thtml = "<a href=\"" + turl + "target=\"_blank\">" + tlabel + "</a>";
          } 
          else 
          {
            var thtml = tlabel;
          }
          // Determine map symbol based on <type></type> tag
          myicon = green_pin;
          type = wpt[i].getElementsByTagName("type");
          if( type.length ) 
          {
            myicon = chooseIcon( tname, type[0].firstChild.nodeValue );
          }
          createMarker(point, thtml, myicon);
          //createMarker(point, thtml);
        } //end for (var i = 0; i < wpt.length; i++)
      } // end if( wpt && document.actionform.wptBox.checked == true)
      
      
      /////////////////////////////////////////////////////////////////////////
      /////////////////////////////////////////////////////////////////////////
      /////////////////////////////////////////////////////////////////////////
      wpt = [];
      // Parse routes in <rte></rte>
      //
      var rte;
      rte = response.getElementsByTagName("rte");
      if (rte && document.actionform.rtBox.checked == true)
      {
        // Process each route
        //
        for (var i = 0; i < rte.length; i++)
        {
          tcolor="#4012FE";
          twidth=6;
          topacity=.7;
          // Extract <name></name> tag
          tname = "";
          element = rte[i].getElementsByTagName("name");
          if( element.length ) 
          {
            if( element[0].firstChild ) { tname = element[0].firstChild.nodeValue; }
          }
          
          // Determine line color based on <cmt></cmt> and <name></name> tags
          type = rte[i].getElementsByTagName("cmt");
          if( type.length ) 
          {
            if( type[0].firstChild ) 
            {
              array = chooseLineStyle( tname, type[0].firstChild.nodeValue );
              tcolor = array[0];
              twidth = array[1];
              topacity = array[2];
            }
          }
          
          // Process each point of each route, string
          // them into a single polyline
          //
          points = [];
          var rtept = rte[i].getElementsByTagName("rtept");
          for (var k = 0; k < rtept.length; k++)
          {
            points.push(new GLatLng(parseFloat(rtept[k].getAttribute("lat")), parseFloat(rtept[k].getAttribute("lon"))));
          }
          
          map.addOverlay(new GPolyline(points, tcolor, twidth, topacity));
          points = [];
        }// end for (var i = 0; i < rte.length; i++)
    
        rte = []
      }// end if (rte && document.actionform.rtBox.checked == true)
      
      
      /////////////////////////////////////////////////////////////////////////
      /////////////////////////////////////////////////////////////////////////
      /////////////////////////////////////////////////////////////////////////    
      // Parse tracks in <trk></trk>
      //
      var trk;
      trk = response.getElementsByTagName("trk");
      if (trk && document.actionform.trkBox.checked == true)
      {
        // Process each track
        //
        for (var i = 0; i < trk.length; i++) 
        {
          tcolor="#4012FE";
          twidth=6;
          topacity=.7;
          // Extract <name></name> tag
          tname = "";
          element = trk[i].getElementsByTagName("name");
          if( element.length ) 
          {
            if( element[0].firstChild ) 
            {
              tname = element[0].firstChild.nodeValue;
            }
          }
          
          // Determine line color based on <gpxx:DisplayColor></gpxx:DisplayColor> and <name></name>
          //tags
          type = trk[i].getElementsByTagName("gpxx:DisplayColor");
          if( type.length ) 
          {
            if( type[0].firstChild ) 
            {
              array = chooseLineStyle( tname, type[0].firstChild.nodeValue );
              tcolor = array[0];
              twidth = array[1];
              topacity = array[2];//alert ( "line color "+type[0].firstChild.nodeValue+" tcolor:"+array[0]);
            }
          }

          //process each trkseg in each trk
          var trkseg=trk[i].getElementsByTagName("trkseg");

          if(trkseg)
          {
            var trackpoints = [];
            var elepoints = new Array();
            var pointDebug;
            for (var jj = 0; jj < trkseg.length; jj++)
            {
              // Process each point of each trakpoints, string
              // them into a single polyline
              //
              var trkpt = trkseg[jj].getElementsByTagName("trkpt");
              if(trkpt)
              {
                for (var k = 0; k < trkpt.length; k++)
                {
                  trackpoints.push(new GLatLng(
                  parseFloat(trkpt[k].getAttribute("lat")),
                  parseFloat(trkpt[k].getAttribute("lon"))));
                  pointDebug=trkpt[k].getElementsByTagName("ele")[0].firstChild.nodeValue;
                  elepoints[k]=trkpt[k].getElementsByTagName("ele")[0].firstChild.nodeValue;
                }
              }//end if(trkpt)
            }//end for (var jj = 0; jj < trkseg.length; jj++)
            
            //alert ( "there are "+elepoints.length+" elepoints");//debug usage
            if( elepoints.length )
            {
              //alert("elepoints.length>0 :"+elepoints.length);
              //alert("diff point :"+elepoints[23]);
              //changeChartSrc(elepoints);
              drawLineGraph(elepoints);
            }

            elepoints=[];
            map.addOverlay(new GPolyline(trackpoints, tcolor, twidth, topacity));
            
            trackpoints = [];
          }//end if(trkseg)
          
        }//end for (var i = 0; i < trk.length; i++) 
            
        trk = []
      
      }//end if (trk && document.actionform.trkBox.checked == true)
   
    }//end function
    
  );//end _IG_FetchXmlContent
}

// here starts the main logic of the script

//setting the initial values of checkboxes
document.actionform.wptBox.checked = true;
document.actionform.rtBox.checked = false;
document.actionform.trkBox.checked = true;

var url = "http://fengshuiexplorer.host56.com/gpx/KulimJamboree2009.gpx";//setting the gpx file to be loaded
drawMap(); //draw the map

</script>

]]></Content>
</Module>

